css汇集

首页-- 返回小屋

【注意】：复制代码时注意带上该段的开头与结尾部分（如"body{"和"}"），删除【】部分、分割线以及换行，颜色代码（如red，#000000，#111）自行更换，说明仅供参考

〓网页主页定义〓
body {【网页背景色为绿】background-color:green;

【默认字颜色为红】color: red;

【网页框与网页边缘距离】padding:2px 3px ;

【文字居中,居左用left,居右用right】text-align: center;

【字体尺寸为默认的120%,小字体用9px或其他，由实际情况而定】font-size:120%;

【字体浓淡为粗体。normal:默认值，bold:定义粗体字符，bolder:定义更粗的字符，lighter:定义更细的字符，100~900:定义由粗到细的字符，400 等同于 normal，而 700 等同于 bold】font-weight: bold;

【文字风格为斜体。normal:默认值，oblique:倾斜文字】font-style:Italic;

【字体为小型大写字母】font-variant:small-caps;

【字体系列为通常字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。

提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择】

font-family:"Times New Roman",Georgia,Serif;

【文字行距大小】line-height: 18px;

【背景图片，括号内填图片地址，如果图片在你的磨里可删除/down部分 ★若与网页边框一起用，图片将只能显示在边框外】background: url(/down/20121124/44582/a.jpg)
【背景图片重复属性。 这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下,图片既横向重复，又竖向重复。

repeat-x:背景图片横向重复
repeat-y:背景图片竖向重复
no-repeat:背景图片不重复】

【元素定位。absolute:绝对定位
fixed:相对于浏览器窗口进行定位
relative:相对于其正常位置进行定位
static:默认值，没有定位】 position:relative;}

〓扩展名及首页上页下页末页区域定义〓
span {【扩展名和"首页上页下页末页"区域背景色】background-color:white;

【位置同上，文字颜色】color:orange;

【边框样式为槽线式】border-style: groove;

【位置同上，文字边框颜色】border-color:red;

【位置同上，文字边框粗细，左为横框架，右为竖框架】border-width: 1px 1px;

〓链接文字定义〓
a {【边框样式为直线式】border-style: solid;
【链接文字的边框粗细，左为横框，右为竖框】border-width:1px 1px;
【同上位置，边框颜色】border-color: blue;
【同上位置，文字颜色】color:gold;
【链接文字的背景颜色】background-color:gold;
【链接文字添加上划线】text-decoration:overline;

〓评论区域定义〓
form{【评论区域背景颜色】background-color:#000011; 【评论区域字体颜色】color:red;}

〓文件列表区域定义〓
.file_list{【文件列表区域背景颜色为白】background-color:white;
【扩展名字体颜色 ★若前面已用了span部分修改将优先显示span部分】color:#556688;
【文件列表区域的文字尺寸为小字体】font-size:9px;}

〓文件列表文件名区域〓
.file_list li{〓文件列表区域分割线〓【文件名下边框线(即下划线)粗细】border-bottom:1px
【同上，样式】solid【同上，颜色】lime;}

〓文件扩展名区域〓
.file_list span{【扩展名字体颜色为红】color:red;
【扩展名背景色】background-color:black;}

〓网页边框内定义〓
div {【默认字颜色为红】color:red;
【边框样式为双线式。
如果浏览器不支持将默认显示为实线】border-style: double;
【网页边框颜色，分别为上右下左框】border-color: #ff5566 #446600#0033ff #1122ff;
【网页边框粗细，左为横框，右为竖框】border-width: 4px 1px;
【文字与网页边框的距离】padding:3px;
【网页边框内的颜色。如果与body{background-color:red;}同时存在，则网页边框外为红色，边框内为绿色】background-color:green;
【分类中用到div的部分与周边距离】margin:3px 1px;}

〓首页上页下页末页区域定义〓
p {【与外边缘的距离，分别为上右下左外边距】margin:2px 1px 2px 1px【"首页上页下页末页"区域背景色】background-color:white;
【"首页上页下页末页"区域字体颜色】color:red;}

〓 网页主体定义〓
#whole_body {【背景图片，可用于添加网站logo】background:url(图片地址)

【背景图不重复】no-repeat
【背景图随网页下拉而滚动】scroll
【背景图位置居右，居左用left居中用center。
另外，也可以用1%-100%表示与左端距离大小】right
【背景图位置居网页底端，居顶用top居中用center。
同样也可用1%-100%表示与顶端距离大小】bottom;
【图片弯曲半径，即调整图片四角的曲度】border-radius: 12px;
【背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域】background-size:320px;

〓网页圆角定义〓
【圆角半径。-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrom浏览器】-moz-border-radius: 12px;-webkit-border-radius: 12px;

〓网页阴影定义〓
【从左到右分别为阴影类型(若无默认为投影效果。
inset:内阴影效果)、阴影水平偏移值(即控制左右阴影。正数值控制左边，负数值控制右边)、垂直偏移值(即控制上下阴影。
正数值控制上边，负数值控制下边)、模糊值和颜色】box-shadow : inset -3px 3px 15px#111;-webkit-box-shadow :inset -3px 3px 15px #111;-moz-box-shadow :inset -3px 3px 15px #111;
【网页主体宽度最大值】max-width : 640px;
【文字居中】text-align : center;
【网页主体的外边距】margin:auto;
【主体网页内文字与边缘距离】padding : 10px 5px;*padding : 10px 5px; _padding : 10px 5px;
【网页边框与网页边缘距离】margin:5px 2px;}

〓输入框定义〓
textarea,input[type="input"],input[type="text"] {
【输入框填充颜色为黑】background:black;
【输入框内字体颜色为白】color:white;
【输入框内框与外框距离，略大可以形成双重框架】border:3px
【边框线样式为实线】solid
【透明属性，其实系统默认也是这个】transparent;
【边框半径，适当调大可发现输入框由矩形变成椭圆形】border-radius : 7px;
【阴影，从左到右分别为阴影类型、阴影水平偏移值、垂直偏移值、模糊值和颜色，具体见上】box-shadow : inset 3px 3px 3px#222;
【输入文字与输入框条距离】padding : 2px;}

〓提交按钮定义〓
【submit用于提交表单，button用于JavaScript执行。
若要区别开来用，把其中一个移开再新建即可】button,input[type="button "],input[type="submit"]{
【按钮背景色为黑】background : #333;
【字体颜色为白】color : #EEE;
【按钮大小】border : 1pxsolid transparent;
【按钮阴影，详情见上】box-shadow : 0 0 2px #222;
【按钮半径，即按钮四角曲度】border-radius : 3px;}